<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>火车站信息</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/all_css.css" />
		<link rel="stylesheet" type="text/css" href="css/weui/base.css" />
		<link rel="stylesheet" type="text/css" href="lib/weui.css" />
		<link rel="stylesheet" type="text/css" href="css/weui/jquery-weui.css" />
		<link rel="stylesheet" type="text/css" href="css/loading_icon.css" />
		<style type="text/css">
			#trian_main {
				max-width: 640px;
				min-width: 320px;
				width: 100%;
				margin: 0px auto;
			}
			
			.app_head_left {
				float: left;
				width: 10%;
				padding-left: 6px;
				padding-top: 6px;
			}
			
			.railwayStation_mid {
				padding-top: 70px;
			}
			
			.app_head_left a {
				color: #FFFFFF;
				font-size: 1.5em;
				font-weight: bold;
			}
			
			.app_head_mid {
				float: left;
				width: 80%;
				padding-top: 5px;
			}
			
			#app_head_title {
				text-align: center;
				width: 100%;
				color: #FFFFFF;
				font-size: 1.6em;
				font-family: "宋体";
				font-weight: bold;
			}
			/* 返回顶部按钮 */
			
			.returnTopBtn {
				position: fixed;
				right: 15px;
				bottom: 80px;
				width: 45px;
				height: 43px;
				border-radius: 8px;
				z-index: 9999;
				background-color: #CCCCCC;
				padding: 6px;
			}
			/*导航栏样式*/
			
			.weui_bar_item_on {
				background-color: #FFFFFF !important;
				color: #0070B4 !important;
			}
			
			.weui_navbar_item {
				color: #FFFFFF;
				height: 49px;
				background-color: #CCCCCC;
			}
			
			.weui_navbar_item b {
				display: block;
				font-size: 1.1em;
				height: 1.25em;
				line-height: 1.25em;
			}
			
			.weui_navbar {
				width: 100%;
			}
			/* 搜索框区域样式 */
			
			.sec_line {
				width: 100%;
				background-color: #F5F5F5;
				padding: 5px 0px 7px 0;
				border-bottom: 1px solid #DEDEDE;
			}
			
			#InputSta {
				margin-left: 2%;
				margin-right: 2%;
				width: 96%;
				border: 1px solid #DEDEDE;
				border-radius: 7px;
				height: 44px;
				background-color: #FFFFFF;
				opacity: 0.92;
			}
			
			#railStaMsg_suggestId {
				padding-left: 1em;
				width: 89%;
				height: 100%;
				border: none;
				outline: medium;
				border-radius: 5px;
				color: #969696;
				font-size: 1.15em;
				font-weight: bold;
			}
			
			#searchBtn {
				display: block;
				float: right;
				width: 8.5%;
				padding-right: 10px;
				color: #666666;
				font-size: 2em;
				text-align: right;
				position: relative;
				left: -5px;
			}
			/*搜索无结果*/
			
			#noResult {
				width: 80%;
				margin-left: 10%;
				margin-right: 10%;
				margin-top: 90px;
				color: #999999;
				font-size: 2em;
				text-align: center;
			}
			/* ul li 列表样式 */
			
			#railwayMsg_Ul {
				/*padding: 0 10px;*/
				background-color: #FFFFFF;
			}
			
			#railwayMsg_Ul li {
				color: #666666;
				padding: 10px;
				padding-left: 15px;
				font-weight: bold;
				font-size: 1.15em;
			}
			
			#railwayMsg_Ul li:nth-child(2n) {
				background-color: limegreen;
				color: #FFFFFF;
			}
			/* loading样式 */
			
			.loadingSFZ {
				width: 100%;
				margin-top: 90px;
			}
			/*搜索结果标题 车站名称*/
			
			.staMsgP {
				padding: 10px;
			}
			
			#staJumpToMap {
				padding-left: 8px;
				margin-top: -15px;
				height: 40px;
			}
			
			#staJumpToMap a {
				position: relative;
				top: 4px;
			}
			
			.noChooseSta_TS {
				font-family: "宋体";
				font-size: 1.6em;
				text-align: center;
				margin-top: 35%;
				color: #666666;
			}
			
			#staMsgMap {
				width: 100%;
				background-image: url(img/railway/bg_railwaySta.jpg);
				background-size: 100% 100%;
			}
		</style>
		<!--<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=MMh4H9m5FLBpizlht86GnGynuaM0oGKz"></script>-->
	</head>

	<body>
		<div id="trian_main">
			<div class="index_head" id="firTitle">
				<div class="app_head_left">
					<a href="railway.html" id="returnPrevPg" class="iconfont">&#xe6d4;</a>
				</div>
				<div class="app_head_mid">
					<p id="app_head_title">火车站信息</p>
				</div>
			</div>
			<div class="railwayStation_mid">
				<div class="weui_tab">
					<!--选择步行公交自驾按钮区域-->
					<div class="weui_navbar" id="secTitle">
						<a href="#stationList" id="staListBtn" class="weui_navbar_item weui_bar_item_on">
							<b>车站列表</b>
						</a>
						<a href="#staMsgMap" class="weui_navbar_item" id="staMainBtn">
							<b>车站详情</b>
						</a>
					</div>
					<div class="weui_tab_bd">
						<div id="stationList" class="weui_tab_bd_item weui_tab_bd_item_active">
							<div class="sec_line">
								<div id="InputSta">
									<input type="text" id="railStaMsg_suggestId" onpaste="return false;" maxlength="15" placeholder="请输入火车站名" />
									<a id="searchBtn" href="javascript:;" class="iconfont">&#xe709;</a>
								</div>
							</div>
							<ul id="railwayMsg_Ul">
								<!--DOM添加至列表-->
								
							</ul>
							<div class="loadingSFZ" id="loadingSFZ" style="display: none;">
								<div class="loading">
									<span>畅</span>
									<span>行</span>
									<span>吉</span>
									<span>林</span>
								</div>
							</div>
							<h1 id="noResult" style="display: none;">搜索无结果</h1>
						</div>
						<div id="staMsgMap" class="weui_tab_bd_item">
							<img src="img/taxi/loading_icon.gif" class="loadingSFZ" id="loadingSFZ2" style="display: none;" />
							<!--<p class="staMsgP f18">长春西站（长春市）</p>
							<p style="color: #32CD32; font-size: 16px;" id="staJumpToMap"><a class="iconfont" style="color: #32CD32; font-size: 1.8em;" onclick="staJumpToMapShow()">&#xe6c9;</a>点击跳转至地图查看</p>
							<p class="staMsgP f15">简介：长春西站占地面积9.56万平方米，位置在吉林省长春市西四环路以东、景阳大路以南、西三环路以西、自立西街和警备路以北，像一个朝向东北的老式钢笔尖。修改后的规划范围已扩大成12万平方米，站前区是一个集居住、购物、文化休闲等于一体的综合区域。长春西客站将成为长春“西大门”。 长春西站一站台是国际通关口岸站。此次改造工程，主要是对一站台的采光设施进行改造、修建雨篷和增高站台。改造后的一站台将为广大中外旅客提供一个更加宽敞明亮、舒适方便的乘车环境。工程已经完成，这也标志西站历时近两年的站台改造全部完成。 长春西站建哈大高速铁路客运站站前商贸中心，依托同心湖的优美景色，建设同心湖欢乐谷大型主题娱乐项目，计划引进五星级酒店3家，用三年时间打造轨道交通设备制造业产业园。</p>
							<p class="staMsgP f15">停车： 一小时5元</p>-->
							<!--<div id="allmap"></div>-->
							<div class="noChooseSta_TS" style="display: none;">请您先选择要<br />查询的车站</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<img src="img/index/returnTop2.png" style="display: none;" class="returnTopBtn" />
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/weui/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/back_end.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var thisStrP = ""; //设置点击的火车站名坐标点为全局变量 默认为空字符串
			$(function() {
				$("#loadingSFZ").show(); //显示loading
				getTrainInfo();
				var h = document.documentElement.clientHeight - 70 - 50; //获取屏幕高度
				$("#staMsgMap").height(h);
			});
			//获取火车站名列表信息
			function getTrainInfo() {
				$.ajax({
					type: 'post',
					url: Url,
					async: false,
					cache: false,
					data: {
						type: "train_station_info",
						SNAME: $("#railStaMsg_suggestId").val()
						//						SZONE: ""
					},
					dataType: "jsonp", //数据类型为jsonp
					jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数  
					jsonpCallback: "jsonpCallback1",
					success: function(data) {
						$("#noResult").hide();
						$("#loadingSFZ").hide();
						if(data.MSG == "成功") {
							var d = eval(data.DATA);
							//							console.log(d);
							//							console.log(d[0].ZONE+" - "+d[0].STDNAME);
							for(var i = 0; i < d.length; i++) {
								var staLi = $('<li onclick="jumpToStaMain(this)">' + d[i].STDNAME + ' （' + d[i].ZONE + '）' + '</li>');
								$("#railwayMsg_Ul").append(staLi);
							}
						} else {
							$("#noResult").show();
						}

					},
					error: function(data) {
						$.alert("连接超时，请稍后再试", "提示");
					}
				});
			}
			//判断滚动条是否在顶部 并显示返回顶部图标
			window.onscroll = function() {
				var scroll_top = $(document).scrollTop();
				if(scroll_top != 0) {
					$(".returnTopBtn").show();
				} else if(scroll_top == 0) {
					$(".returnTopBtn").hide();
				}
			}
			//每当点击地图按钮的时候，页面都返回顶部
			$("#chooseMap").click(function() {
				$(window).scrollTop(0);
			});
			$(".returnTopBtn").click(function() {
				//				$(window).scrollTop(0);
				$("body").animate({
					scrollTop: 0
				}, 300)
			});
			//输入框输入信息触发事件
			var timeout;
			$("#railStaMsg_suggestId").keyup(function() {
				var linkName = $(this).val();
				var pattern = /^[\u4e00-\u9fa5]*$/;
				if(!pattern.test(linkName)) {
					$.alert("请输入中文", "提示", function() {
						$("#railStaMsg_suggestId").val("");
					});
				} else {
					$("#noResult").hide();
					$("#loadingSFZ").show(); //显示loading
					//输入框内容为空时 ul中显示所有收费站名称
					$("#railwayMsg_Ul").html(""); //清空所有li
					clearTimeout(timeout);
					timeout = setTimeout("getTrainInfo()", 800);
				}

			});

			//获取车站详细信息
			function jumpToStaMain(t) {
				var tt = $(t).html().split(' ')[0];
				$("#loadingSFZ2").show();
				$.ajax({
					type: 'post',
					url: Url,
					async: false,
					cache: false,
					data: {
						type: "train_station_info",
						SNAME: tt
					},
					dataType: "jsonp", //数据类型为jsonp
					jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数  
					jsonpCallback: "jsonpCallback1",
					success: function(data) {
						$(window).scrollTop(0); //点击列表中的单个车站跳转至详情时滚动条升至最顶部
						$("#staMainBtn").click(); //进入详情区域
						var d = eval(data.DATA)[0];
						thisStrP = d.COORDINATE;
						//thisP = new BMap.Point(d.COORDINATE.split(' ')[0],d.COORDINATE.split(' ')[0]);//火车站坐标点
						var staMain = d.INTRODUCTION; //车站详情
						var park = d.PARKINGFEE; //停车场收费
						var recid = d.RECID; //本站键值
						$("#staMsgMap").html(""); //清空车站详情页所有信息
						var p1 = $('<p class="staMsgP f18">' + t.innerHTML + '</p>');
						var p2 = $('<p data-recid="' + recid + '" style="color: #32CD32; font-size: 16px;" id="staJumpToMap" onclick="staJumpToMapShow(thisStrP)"><a class="iconfont" style="color: #32CD32; font-size: 1.8em;">&#xe6c9;</a>点击跳转至地图查看</p>');
						var p3 = $('<p class="staMsgP f15">简介' + staMain + '</p>');
						var p4 = $('<p class="staMsgP f15">停车：' + park + '</p>');
						$("#staMsgMap").append(p1, p2, p3, p4);

					},
					error: function(data) {
						$.alert("连接超时，请稍后再试", "提示");
					}
				});
			}

			//判断车站详情无内容时 添加提示内容
			$("#staMainBtn").click(function() {
				setTimeout(function() {
					if($("#staMsgMap").children().length == 2) {
						$(".noChooseSta_TS").show();
					}
				}, 300);

			});

			function staJumpToMapShow(p) {
				var r = $("#staJumpToMap").attr("data-recid");
				//				console.log(r);
				//				alert("截断");
				var url = "show_map.html?sta=" + p + "&recid=" + r;
				//				console.log(url);
				window.location.href = url;
			}

			//							d.AIRPORTBUS = d.AIRPORTBUS == "null" ? "暂无数据" : d.AIRPORTBUS; //机场大巴
			//							d.HOTLINE = d.HOTLINE == "null" ? "暂无数据" : d.HOTLINE; //电话
			//							d.PARKING = d.PARKING == "null" ? "暂无数据" : d.PARKING; //停车场
			//							d.PARKINGFEE = d.PARKINGFEE == "null" ? "暂无数据" : d.PARKINGFEE; //停车费PARKLOCATION
			//							d.PARKLOCATION = d.PARKLOCATION == "null" ? "暂无数据" : d.PARKLOCATION; //停车场坐标
			//							d.PERIPHERY = d.PERIPHERY == "null" ? "暂无数据" : d.PERIPHERY; //周边
			//							d.TAXI = d.TAXI == "null" ? "暂无数据" : d.TAXI; //出租信息
		</script>
	</body>

</html>